<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>网易云音乐</title>
    <link rel="shortcut icon" href="music.ico">
    <link rel="stylesheet" type="text/css" href="style/font_ncm3bwvbw3vdkj4i/iconfont.css">
    <link rel="stylesheet" type="text/css" href="style/reset.css">
    <link rel="stylesheet" type="text/css" href="style/main.css">
    <link rel="stylesheet" type="text/css" href="node_modules/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css">
</head>
<body>
    <div class="container">
        <!-- 头部开始 -->
        <header class="clearfix">
            <!-- logo开始 -->
            <div class="logo fl">
                <a href="#"><img src="imgs/logo.png"></a>
            </div>
            <!-- 搜索框开始 -->
            <div class="search fl">
                <form class="search-form">
                    <input class="search-txt" type="text" placeholder="搜索音乐，歌手，歌词，用户">
                    <button class="search-bt" type="submit"></button>
                </form>
            </div>
            <!-- 头部右侧开始 -->
            <ul class="head-right fr">
                <!-- 登录开始 -->
                <li class="right-login">
                    <a href="#">
                        <span class="username">Mr_Fzz</span><i class="triangle"></i>
                    </a>
                    <!-- 登录面板开始 -->
                    <div class="login-panel">
                        <div class="panel-head">
                            <div class="panel-head-top">
                                <a class="user" href="#">Mr_Fzz</a>
                                <button class="checkIn">签到</button>
                            </div>
                            <div class="panel-head-bottom">
                                <a href="#">
                                    <strong>0</strong>
                                    <span>动态</span>
                                </a>
                                <a href="#">
                                    <strong>0</strong>
                                    <span>关注</span>
                                </a>
                                <a href="#">
                                    <strong>1</strong>
                                    <span>粉丝</span>
                                </a>
                            </div>
                        </div>
                        <div class="panel-body">
                            <div class="body-item">
                                <ul>
                                    <li>
                                        <a href="#">
                                            <i class="iconfont icon-huiyuanfuwu"></i>
                                            <span>会员中心</span>
                                            <span class="item-right fr">未订购 <b>&gt;</b></span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <i class="iconfont icon-level"></i>
                                            <span>等级</span>
                                            <span class="item-right fr"><em>Lv.5 </em><b>&gt;</b></span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <i class="iconfont icon-gouwuche"></i>
                                            <span>积分商城</span>
                                            <span class="item-right fr">10积分 <b>&gt;</b></span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                            <div class="body-item">
                                <ul>
                                    <li>
                                        <a href="#">
                                            <i class="iconfont icon-shezhi"></i>
                                            <span>个人信息设置</span>
                                            <span class="item-right fr"><b>&gt;</b></span>
                                        </a>
                                    </li>
                                    <li>
                                        <a class="weixin" href="#">
                                            <i class="iconfont icon-bdp"></i>
                                            <span>绑定社交账号</span>
                                            <span class="item-right fr"> <b>&gt;</b></span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <i class="iconfont icon-icon-plus-import"></i>
                                            <span>导入歌单</span>
                                            <span class="item-right fr"><b>&gt;</b></span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                            <div class="body-item">
                                <ul>
                                    <li>
                                        <a href="#">
                                            <i class="iconfont icon-tuichu"></i>
                                            <span>退出登录</span>
                                            <span class="item-right fr"><b>&gt;</b></span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </li>
                <li><a href="#">
                    <i class="iconfont icon-pifu-copy"></i></a>
                </li>
                <li>
                    <a href="#"><i class="iconfont icon-youjian1"></i></a>
                </li>
                <li>
                    <a href="#"><i class="iconfont icon-shezhi"></i></a>
                </li>
            </ul>
        </header>
        <!-- 主体开始 -->
        <div class="main">
            <div class="main-left-wrap">
                <!-- 左侧列表开始 -->
                <div class="main-left">
                    <dl class="left-item">
                        <dt>推荐</dt>
                        <dd class="find active dd-item" data-index="0">发现音乐</dd>
                        <dd class="fm dd-item" data-index="1">私人FM</dd>
                        <dd class="mv dd-item" data-index="2">MV</dd>
                        <dd class="friends dd-item" data-index="3">朋友</dd>
                    </dl>
                    <dl class="left-item">
                        <dt>我的音乐</dt>
                        <dd class="localMusic dd-item" data-index="4">本地音乐</dd>
                        <dd class="download dd-item" data-index="5">下载管理</dd>
                        <dd class="cloudDisk dd-item" data-index="6">我的音乐云盘</dd>
                        <dd class="mySinger dd-item" data-index="7">我的歌手</dd>
                    </dl>
                    <dl class="left-item left-create-list">
                        <dt>创建的歌单
                            <img class="add" src="imgs/add.png" alt="添加" title="新建歌单">
                            <img class="down" src="imgs/down.png" alt="下拉" title="展开">
                        </dt>
                        <dd class="likeMusic dd-item" data-index="8">我喜欢的音乐</dd>
                        <dd class="create-input">
                            <form><input type="text" placeholder="歌单名称" autofocus autocomplete="off"></form>
                        </dd>
                        <div class="new-create-tit">
                        </div>
                    </dl>
                    <dl class="left-item">
                        <dt>收藏的歌单</dt>
                        <dd class="songs dd-item" data-index="9">华语 | 流淌在音符里的诗篇</dd>
                        <dd class="songs dd-item" data-index="10">华语‖一听就忍不住想哭的歌</dd>
                    </dl>
                </div>
                <!-- 右键显示歌单 -->
                <ul class="tit-menu" id="like-menu">
                    <li class="play">播放(Enter)</li>
                    <li class="next">下一首播放</li>
                    <li class="share">分享</li>
                    <li class="copy">复制链接</li>
                    <li class="loadAll">下载全部</li>
                </ul>
                <ul class="tit-menu" id="new-menu">
                    <li class="play">播放(Enter)</li>
                    <li class="next">下一首播放</li>
                    <li class="share">分享</li>
                    <li class="copy">复制链接</li>
                    <li class="loadAll">下载全部</li>
                    <li class="edit">编辑歌单信息</li>
                    <li class="delete">删除歌单</li>
                </ul>
                <!-- 左侧底部播放信息 -->
                <div class="song-play">
                    <img class="song-img" id="songImg" src="http://p1.music.126.net/rMMa4M0eSjKpCeBEhA6wBA==/1407374885533603.jpg">
                    <p>
                        <span class="song-name" id="songName">光之翼</span><br>
                        <span class="song-singer" id="songSinger">简弘亦</span>
                    </p>
                </div>
            </div>
            <!-- 主体右侧开始 -->
            <div class="main-right">
                <!-- 发现音乐 -->
                <div class="right-sup main-right-findMusic" data-index="0">
                    <!-- 右侧导航开始 -->
                    <div class="right-nav">
                        <ul class="clearfix">
                            <li><a class="active" data-index="0" href="#">个性推荐</a></li>
                            <li><a data-index="1" href="#">歌单</a></li>
                            <li><a data-index="2" href="#">主播电台</a></li>
                            <li><a data-index="3" href="#">排行榜</a></li>
                            <li><a data-index="4" href="#">歌手</a></li>
                            <li><a data-index="5" href="#">最新音乐</a></li>
                        </ul>
                    </div>
                    <!-- 个性推荐开始 -->
                    <div class="main-right-item personal-recom">
                        <!-- 轮播图开始 -->
                        <div class="poster">
                            <div class="poster-bt poster-bt-prev"></div>
                            <div class="poster-bt poster-bt-next"></div>
                            <ul class="poster-list">
                                <li><a href="#"><img src="imgs/banner/banner1.jpg" alt="广告"></a></li>
                                <li><a href="#"><img src="imgs/banner/banner2.jpg" alt="广告"></a></li>
                                <li><a href="#"><img src="imgs/banner/banner3.jpg" alt="广告"></a></li>
                                <li><a href="#"><img src="imgs/banner/banner4.jpg" alt="广告"></a></li>
                                <li><a href="#"><img src="imgs/banner/banner5.jpg" alt="广告"></a></li>
                                <li><a href="#"><img src="imgs/banner/banner6.jpg" alt="广告"></a></li>
                                <li><a href="#"><img src="imgs/banner/banner7.jpg" alt="广告"></a></li>
                            </ul>
                        </div>
                        <!-- 推荐歌单开始 -->
                        <div class="recommend-item recommend-song">
                            <div class="item-tit clearfix">
                                <h3>推荐歌单</h3>
                                <span><a href="#">更多&gt;</a></span>
                            </div>
                            <div class="item-cont">
                                <ul class="song-list clearfix">
                                    <li>
                                        <div class="list-item">
                                            <a href="#">
                                            <p class="list-item-top">根据您的音乐口味生成每日更新</p>
                                            <span class="week"></span>
                                            <span class="day"></span>
                                            </a>
                                        </div>
                                        <p class="list-item-tit">每日歌曲推荐</p> 
                                    </li>
                                    <li>
                                        <div class="list-item">
                                            <p class="list-item-top">根据你喜欢的单曲《富士山下》推荐</p>
                                            <span class="list-item-ic">24万</span>
                                            <a href="#"><img src="imgs/song/song1.jpg"></a>
                                        </div>
                                        <p class="list-item-tit">你要做七月，还是做安生</p>    
                                    </li>
                                    <li>
                                        <div class="list-item">
                                            <p class="list-item-top">根据你喜欢的单曲《富士山下》推荐</p>
                                            <span class="list-item-ic">431万</span>
                                            <a href="#"><img src="imgs/song/song2.jpg"></a>
                                        </div>
                                        <p class="list-item-tit">PDD直播BGM</p>   
                                    </li>
                                    <li>
                                        <div class="list-item">
                                            <p class="list-item-top">根据你喜欢的单曲《富士山下》推荐</p>
                                            <span class="list-item-ic">345万</span>
                                            <a href="#"><img src="imgs/song/song3.jpg"></a>
                                        </div>
                                        <p class="list-item-tit">醉美对吟，古风小情调</p> 
                                    </li>
                                    <li>
                                        <div class="list-item">
                                            <p class="list-item-top">根据你喜欢的单曲《富士山下》推荐</p>
                                            <span class="list-item-ic">1450万</span>
                                            <a href="#"><img src="imgs/song/song4.jpg"></a>
                                        </div>
                                        <p class="list-item-tit">一首歌让你回到中学时代</p>    
                                    </li>
                                    <li>
                                        <div class="list-item">
                                            <p class="list-item-top">根据你喜欢的单曲《富士山下》推荐</p>
                                            <span class="list-item-ic">620万</span>
                                            <a href="#"><img src="imgs/song/song5.jpg"></a>
                                        </div>
                                        <p class="list-item-tit">值得一听的中国摇滚</p>  
                                    </li>
                                    <li>
                                        <div class="list-item">
                                            <p class="list-item-top">根据你喜欢的单曲《富士山下》推荐</p>
                                            <span class="list-item-ic">684万</span>
                                            <a href="#"><img src="imgs/song/song6.jpg"></a>
                                        </div>
                                        <p class="list-item-tit">2016年BillBoard公告牌单曲榜年榜</p> 
                                    </li>
                                    <li>
                                        <div class="list-item">
                                            <p class="list-item-top">根据你喜欢的单曲《富士山下》推荐</p>
                                            <span class="list-item-ic">741万</span>
                                            <a href="#"><img src="imgs/song/song7.jpg"></a>
                                        </div>
                                        <p class="list-item-tit">「粤语」时间是一扇颠沛流离的大门</p>   
                                    </li>
                                    <li>
                                        <div class="list-item">
                                            <p class="list-item-top">根据你喜欢的单曲《富士山下》推荐</p>
                                            <span class="list-item-ic">1310万</span>
                                            <a href="#"><img src="imgs/song/song8.jpg"></a>
                                        </div>
                                        <p class="list-item-tit">「电子」你从未听过的100首臻美电音</p> 
                                    </li>
                                    <li>
                                        <div class="list-item">
                                            <p class="list-item-top">根据你喜欢的单曲《富士山下》推荐</p>
                                            <span class="list-item-ic">841万</span>
                                            <a href="#"><img src="imgs/song/song9.jpg"></a>
                                        </div>
                                        <p class="list-item-tit">[ACG女声] 莫名戳入泪点的动漫金曲！</p>   
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <!-- 独家放送开始 -->
                        <div class="recommend-item exclusive-song">
                            <div class="item-tit clearfix">
                                <h3>独家放送</h3>
                                <span><a href="#">更多&gt;</a></span>
                            </div>
                            <div class="item-cont">
                                <ul class="song-list clearfix">
                                    <li>
                                        <div class="list-item">
                                            <a href="#"><img src="imgs/song/dujia1.jpg"></a>
                                        </div>
                                        <p class="list-item-tit">一周热评 第119期 撩起裤腿尽情抖，云村骨科欢迎您！</p>    
                                    </li>
                                    <li>
                                        <div class="list-item">
                                            <a href="#"><img src="imgs/song/dujia2.jpg"></a>
                                        </div>
                                        <p class="list-item-tit">音乐专栏 失意的人，先来喝杯热茶吧</p>  
                                    </li>
                                    <li>
                                        <div class="list-item">
                                            <a href="#"><img src="imgs/song/dujia3.jpg"></a>
                                        </div>
                                        <p class="list-item-tit">充豪华会员 赢天籁之战入场券</p> 
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <!-- 最新音乐开始 -->
                        <div class="recommend-item new-song">
                            <div class="item-tit clearfix">
                                <h3>最新音乐</h3>
                                <span><a href="#">更多&gt;</a></span>
                            </div>
                            <div class="item-cont">
                                <ul class="song-list">
                                    <li>
                                        <a href="#">
                                        <h4>01</h4>
                                        <div class="song-detail">
                                            <img src="imgs/song/new1.jpg">
                                            <p>
                                                <span>My Number</span>
                                                <span class="name">Major Lazer/Bay Royale</span>
                                            </p>
                                        </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                        <h4>02</h4>
                                        <div class="song-detail">
                                            <img src="imgs/song/new1.jpg">
                                            <p>
                                                <span>嫁给我-民谣版</span>
                                                <span class="name">不可撤销</span>
                                            </p>
                                        </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                        <h4>03</h4>
                                        <div class="song-detail">
                                            <img src="imgs/song/new1.jpg">
                                            <p>
                                                <span>10 Years</span>
                                                <span class="name">九宝乐队</span>
                                            </p>
                                        </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                        <h4>04</h4>
                                        <div class="song-detail">
                                            <img src="imgs/song/new1.jpg">
                                            <p>
                                                <span>追光使者</span>
                                                <span class="name"><i class="sq"></i>洛天依</span>
                                            </p>
                                        </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                        <h4>05</h4>
                                        <div class="song-detail">
                                            <img src="imgs/song/new1.jpg">
                                            <p>
                                                <span>落地之前</span>
                                                <span class="name">郭顶</span>
                                            </p>
                                        </div>
                                        </a>
                                    </li>
                                </ul>
                                <ul class="song-list">
                                    <li>
                                        <a href="#">
                                        <h4>06</h4>
                                        <div class="song-detail">
                                            <img src="imgs/song/new1.jpg">
                                            <p>
                                                <span>火星人来过（《火星情报局2》主题曲）</span>
                                                <span class="name"><i class="sq"></i>薛之谦</span>
                                            </p>
                                        </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                        <h4>07</h4>
                                        <div class="song-detail">
                                            <img src="imgs/song/new1.jpg">
                                            <p>
                                                <span>有一点动心(Live)</span>
                                                <span class="name"><i class="sq"></i><i class="mv"></i>张信哲/徐佳莹</span>
                                            </p>
                                        </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                        <h4>08</h4>
                                        <div class="song-detail">
                                            <img src="imgs/song/new1.jpg">
                                            <p>
                                                <span>随心所欲</span>
                                                <span class="name"><i class="sq"></i>A-lin</span>
                                            </p>
                                        </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                        <h4>09</h4>
                                        <div class="song-detail">
                                            <img src="imgs/song/new1.jpg">
                                            <p>
                                                <span>第一百个我</span>
                                                <span class="name"><i class="sq"></i>容祖儿</span>
                                            </p>
                                        </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                        <h4>10</h4>
                                        <div class="song-detail">
                                            <img src="imgs/song/new1.jpg">
                                            <p>
                                                <span>放</span>
                                                <span class="name"><i class="sq"></i><i class="mv"></i>许魏洲</span>
                                            </p>
                                        </div>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <!-- 推荐MV开始 -->
                        <div class="recommend-item recommend-mv">
                            <div class="item-tit clearfix">
                                <h3>推荐MV</h3>
                                <span><a href="#">更多&gt;</a></span>
                            </div>
                            <div class="item-cont">
                                <ul class="song-list clearfix">
                                    <li>
                                        <div class="list-item">
                                            <a href="#"><img src="imgs/song/tj1.jpg"></a>
                                        </div>
                                        <p class="list-item-tit"><span>告白气球<br></span><span>周杰伦</span></p>  
                                    </li>
                                    <li>
                                        <div class="list-item">
                                            <a href="#"><img src="imgs/song/tj2.jpg"></a>
                                        </div>
                                        <p class="list-item-tit"><span>王力宏<br></span><span>唯一</span></p>    
                                    </li>
                                    <li>
                                        <div class="list-item">
                                            <a href="#"><img src="imgs/song/tj3.jpg"></a>
                                        </div>
                                        <p class="list-item-tit"><span>AOA <br></span><span>短裙</span></p>   
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <!-- 主播电台开始 -->
                        <div class="recommend-item host-radio">
                            <div class="item-tit clearfix">
                                <h3>主播电台</h3>
                                <span><a href="#">更多&gt;</a></span>
                            </div>
                            <div class="item-cont">
                                <ul class="song-list clearfix">
                                    <li>
                                        <a href="#">
                                        <div class="song-detail clearfix">
                                            <img src="imgs/song/zb1.jpg">
                                            <p>
                                                <span>大雪絮语</span>
                                                <span class="name">嘎电台</span>
                                            </p>
                                        </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                        <div class="song-detail clearfix">
                                            <img src="imgs/song/zb2.jpg">
                                            <p>
                                                <span>房间-大表姐</span>
                                                <span class="name">yesyanbaby</span>
                                            </p>
                                        </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                        <div class="song-detail clearfix">
                                            <img src="imgs/song/zb3.jpg">
                                            <p>
                                                <span>要是你重来，你会选...</span>
                                                <span class="name">芥末妞的晚安时间</span>
                                            </p>
                                        </div>
                                        </a>
                                    </li>
                                </ul>
                                <ul class="song-list clearfix">
                                    <li>
                                        <a href="#">
                                        <div class="song-detail clearfix">
                                            <img src="imgs/song/zb4.jpg">
                                            <p>
                                                <span>冰雪世界</span>
                                                <span class="name">人生若只如初见</span>
                                            </p>
                                        </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                        <div class="song-detail clearfix">
                                            <img src="imgs/song/zb5.jpg">
                                            <p>
                                                <span>繁华的街道</span>
                                                <span class="name"></i>不食人间烟火</span>
                                            </p>
                                        </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                        <div class="song-detail clearfix">
                                            <img src="imgs/song/zb6.jpg">
                                            <p>
                                                <span>时间是个包治百病的庸医</span>
                                                <span class="name">高跟鞋</span>
                                            </p>
                                        </div>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="main-right-item no-open hide">
                        抱歉，功能暂未开放
                    </div>
                    <div class="main-right-item no-open hide">
                        抱歉，功能暂未开放
                    </div>
                    <div class="main-right-item no-open hide">
                        抱歉，功能暂未开放
                    </div>
                    <div class="main-right-item no-open hide">
                        抱歉，功能暂未开放
                    </div>
                    <div class="main-right-item no-open hide">
                        抱歉，功能暂未开放
                    </div>
                </div>
                <!-- 私人FM -->
                <div class="right-sup no-open hide" data-index="1">
                    抱歉，功能暂未开放
                </div>
                <!-- MV -->
                <div class="right-sup no-open hide" data-index="2">
                    抱歉，功能暂未开放
                </div>
                <!-- 朋友 -->
                <div class="right-sup no-open hide" data-index="3">
                    抱歉，功能暂未开放
                </div>
                <!-- 本地音乐 -->
                <div class="right-sup no-open hide" data-index="4">
                    抱歉，功能暂未开放
                </div>
                <!-- 下载管理 -->
                <div class="right-sup no-open hide" data-index="5">
                    抱歉，功能暂未开放
                </div>
                <!-- 我的音乐云盘 -->
                <div class="right-sup no-open hide" data-index="6">
                    抱歉，功能暂未开放
                </div>
                <!-- 我的歌手 -->
                <div class="right-sup no-open hide" data-index="7">
                    抱歉，功能暂未开放
                </div>
                <!-- 我喜欢的音乐 -->
                <div class="right-sup main-right-songList like-list hide" data-index="8">
                    <div class="songList-top clearfix">
                        <div class="img-left">
                            <img class="girl" src="imgs/song/zb2.jpg" alt="背景">
                            <img class="heart" src="imgs/like2.png" alt="背景">
                        </div>
                        <div class="info-right">
                            <div><span class="info-list">歌单</span><span class="songListName">我喜欢的音乐</span></div>
                            <div class="create-info"><span class="username">Mr_fzz</span><span class="createTime">2016-12-11创建</span></div>
                        </div>
                        <span class="listNum">7</span>
                    </div>
                    <div class="song-list-nav">
                        <ul class="clearfix">
                            <li><a class="active" data-index="0" href="#">歌曲列表</a></li>
                            <li><a data-index="1" href="#">评论</a></li>
                            <li><a data-index="2" href="#">收藏者</a></li>
                        </ul>
                    </div>
                    <div class="songList-tb search-result">
                        <table>
                            <tr class="result-head">
                                <th class="operate">操作</th>
                                <th class="name">音乐标题</th>
                                <th class="singer">歌手</th>
                                <th class="album">专辑</th>
                            </tr>
                        </table>    
                    </div>
                </div>
                <!-- 新创建的歌单 -->
                <div class="new-create-list">
                </div>
                <!-- 收藏的歌单1 -->
                <div class="right-sup main-right-songList hide" data-index="9">
                    <div class="songList-top clearfix">
                        <div class="img-left">
                            <img class="girl" src="imgs/song/zgr.jpg" alt="背景">
                        </div>
                        <div class="info-right">
                            <div><span class="info-list">歌单</span><span class="songListName">华语 | 流淌在音符里的诗篇</span></div>
                            <div class="create-info"><span class="username">解忧杂货店</span><span class="createTime">2016-12-11创建</span></div>
                        </div>
                        <span class="listNum">7</span>
                    </div>
                    <div class="song-list-nav">
                        <ul class="clearfix">
                            <li><a class="active" data-index="0" href="#">歌曲列表</a></li>
                            <li><a data-index="1" href="#">评论</a></li>
                            <li><a data-index="2" href="#">收藏者</a></li>
                        </ul>
                    </div>
                    <div class="songList-tb search-result">
                        <table>
                            <tr class="result-head">
                                <th class="operate">操作</th>
                                <th class="name">音乐标题</th>
                                <th class="singer">歌手</th>
                                <th class="album">专辑</th>
                            </tr>
                            <tr data-src="http://m2.music.126.net/SVsy3xhF9pBnnhQxt4dw7g==/1063227744067703.mp3" data-img="http://p1.music.126.net/eTN2iS1cYxtGdLxrvMYm7Q==/52776558150297.jpg">
                                <td>
                                    <span class="num">01</span><i class="iconfont icon-xihuan"></i><i class="iconfont icon-xiazai"></i>
                                </td>
                                <td class="song-name">风继续吹(Live)</td
                                ><td class="song-singer">张国荣</td>
                                <td>热·情演唱会</td>
                            </tr>
                            <tr data-src="http://m2.music.126.net/Sl_MpnuCzNCCUig2R_ZklA==/3283141723651884.mp3" data-img="http://p1.music.126.net/fPBajPte3qn-tr2m3wRa3w==/16586132905204567.jpg" data-index="3">
                                <td>
                                    <span class="num">02</span><i class="iconfont icon-xihuan"></i><i class="iconfont icon-xiazai"></i>
                                </td>
                                <td class="song-name">月半小夜曲</td>
                                <td class="song-singer">李克勤</td>
                                <td>Joey Yung X Hacken Lee Concert 2015</td>
                            </tr>
                            <tr data-src="http://m2.music.126.net/DrZLe0xTrqUoqX1AklOwRw==/1421668536887877.mp3" data-img="http://p1.music.126.net/rMMa4M0eSjKpCeBEhA6wBA==/1407374885533603.jpg">
                                <td>
                                    <span class="num">03</span><i class="iconfont icon-xihuan"></i><i class="iconfont icon-xiazai"></i>
                                </td>
                                <td class="song-name">光之翼</td>
                                <td class="song-singer">简弘亦</td>
                                <td>光之翼</td>
                            </tr>
                            <tr data-src="http://m2.music.126.net/JF7WBU9xmvFoU40UhD0UHA==/3378799232228268.mp3" data-img="http://p1.music.126.net/sqczK3-OMzRHWrDgvOF2fg==/80264348833269.jpg">    <td>
                                    <span class="num">04</span><i class="iconfont icon-xihuan"></i><i class="iconfont icon-xiazai"></i>
                                </td>
                                <td class="song-name">浮夸</td>
                                <td class="song-singer">陈奕迅</td>
                                <td>Solidays 新曲+精选</td>
                            </tr>
                            <tr data-src="http://m2.music.126.net/EEClVq_ILDJhQomWJS9nbA==/18715886928448789.mp3" data-img="http://p1.music.126.net/4HoM2qTR53HuhqU0U5sepA==/693791837133690.jpg" data-index="1">
                                <td><span class="num">05</span><i class="iconfont icon-xihuan"></i><i class="iconfont icon-xiazai"></i></td>
                                <td class="song-name">Someone Like You</td>
                                <td class="song-singer">Adele</td>
                                <td>Someone Like You</td>
                            </tr>
                            <tr data-src="http://m2.music.126.net/3PxLv1WW_aJht6PW5x2ZGQ==/2073678929986436.mp3" data-img="http://p1.music.126.net/touO8KbXoy9K1YNu7hvh3Q==/2258396883454109.jpg">
                                <td>
                                <span class="num">06</span><i class="iconfont icon-xihuan"></i><i class="iconfont icon-xiazai"></i></td>
                                <td class="song-name">烟花易冷</td>
                                <td class="song-singer">林志炫</td>
                                <td>我是歌手第一季 第6期</td>
                            </tr>
                            <tr data-src="http://m2.music.126.net/A1KJxpg1YMGvqdT2T15Jcw==/2529976255737363.mp3" data-img="http://p1.music.126.net/lN2jt4Vkqw3zzIjc2JjyCw==/2532175280981641.jpg">
                                <td><span class="num">07</span><i class="iconfont icon-xihuan"></i><i class="iconfont icon-xiazai"></i></td>
                                <td class="song-name">奇妙能力歌</td>
                                <td class="song-singer">陈粒</td>
                                <td>未收录的单曲</td>
                            </tr>
                        </table>    
                    </div>
                </div>
                <!-- 收藏的歌单2 -->
                <div class="right-sup main-right-songList hide" data-index="10">
                    <div class="songList-top clearfix">
                        <div class="img-left">
                            <img class="girl" src="imgs/song/mm2.jpg" alt="背景">
                        </div>
                        <div class="info-right">
                            <div><span class="info-list">歌单</span><span class="songListName">华语‖一听就忍不住想哭的歌</span></div>
                            <div class="create-info"><span class="username">-苏麻离青-</span><span class="createTime">2016-12-11创建</span></div>
                        </div>
                        <span class="listNum">0</span>
                    </div>
                    <div class="song-list-nav">
                        <ul class="clearfix">
                            <li><a class="active" data-index="0" href="#">歌曲列表</a></li>
                            <li><a data-index="1" href="#">评论</a></li>
                            <li><a data-index="2" href="#">收藏者</a></li>
                        </ul>
                    </div>
                    <div class="songList-tb search-result">
                        <table>
                            <tr class="result-head">
                                <th class="operate">操作</th>
                                <th class="name">音乐标题</th>
                                <th class="singer">歌手</th>
                                <th class="album">专辑</th>
                            </tr>
                        </table>    
                    </div>
                </div>
                <!-- 搜索界面 -->
                <div class="right-sup main-right-search hide">
                    <div class="search-tit">
                        <p>搜索<span class="search-text">""</span>，找到<span class="search-songsNum"></span>首单曲
                        </p>
                    </div>
                    <div class="search-nav">
                        <ul class="clearfix">
                            <li><a class="active" data-index="0" href="#">单曲</a></li>
                            <li><a data-index="1" href="#">歌手</a></li>
                            <li><a data-index="2" href="#">专辑</a></li>
                            <li><a data-index="3" href="#">MV</a></li>
                            <li><a data-index="4" href="#">歌单</a></li>
                            <li><a data-index="5" href="#">歌词</a></li>
                            <li><a data-index="6" href="#">主播电台</a></li>
                            <li><a data-index="7" href="#">用户</a></li>
                        </ul>
                    </div>
                    <div class="search-result search-item" id="search-result"></div>
                    <div class="search-singer search-item">
                        抱歉，功能暂未开放   
                    </div>
                    <div class="search-album search-item">
                        抱歉，功能暂未开放   
                    </div>
                    <div class="search-mv search-item">
                        抱歉，功能暂未开放   
                    </div>
                    <div class="search-songList search-item">
                        抱歉，功能暂未开放   
                    </div>  
                    <div class="search-geci search-item">
                        抱歉，功能暂未开放   
                    </div>
                    <div class="search-radio search-item">
                        抱歉，功能暂未开放   
                    </div>
                    <div class="search-user search-item">
                        抱歉，功能暂未开放   
                    </div>
                </div>
                <!-- 歌单详细信息 -->
                <div class="list-detail-container hide"></div>
                <!-- 提示信息 -->
                <div class="remind-msg hide">
                    <p>已添加到我喜欢的音乐</p>
                </div>
            </div>
        </div>
        <!-- 尾部开始 -->
        <footer>
            <!-- audio -->
            <audio id="audio">
                <source class="inherent" src="http://m2.music.126.net/DrZLe0xTrqUoqX1AklOwRw==/1421668536887877.mp3" data-img="http://p1.music.126.net/rMMa4M0eSjKpCeBEhA6wBA==/1407374885533603.jpg" data-name="光之翼" data-singer="简弘亦">
                <source class="inherent" src="http://m2.music.126.net/JF7WBU9xmvFoU40UhD0UHA==/3378799232228268.mp3" data-img="http://p1.music.126.net/sqczK3-OMzRHWrDgvOF2fg==/80264348833269.jpg" data-name="浮夸" data-singer="陈奕迅">
            </audio>
            <!-- 底部播放器 -->
            <div class="audio-play clearfix">
                <!-- 左侧按钮组 -->
                <div class="play-left">
                    <img class="prev" src="imgs/song/prev2.png" alt="上一首" title="上一首">
                    <img class="play" src="imgs/song/play.png" alt="播放" title="播放">
                    <img class="next" src="imgs/song/next2.png" alt="下一首" title="下一首">
                </div>
                <!-- 中间播放信息 -->
                <div class="play-mid">
                    <span class="play-time"><span class="m">00:</span><span class="s">00</span></span>
                    <span class="progress">
                        <span class="buffered"></span>
                        <span class="played"></span>
                        <i class="progress-bt"></i>
                    </span>
                    <span class="end-time"><span class="m">00:</span><span class="s">00</span></span>
                </div>
                <!-- 调节音量,循环模式,显示播放列表 -->
                <div class="play-right">
                    <img class="voice-bt" src="imgs/song/voice.png" alt="音量" title="静音">
                    <span class="voice">
                        <span class="voice-pro"></span>
                        <i class="progress-bt"></i>
                    </span>
                    <img class="circulation" src="imgs/song/xunhuan1.png" alt="循环" title="列表循环">
                    <img class="playedList-Bt" src="imgs/song/playList.png" alt="列表" title="播放列表">
                </div>
                <!-- 播放列表 -->
                <div class="played-list hide" id="played-list">
                    <h3><span>播放列表</span><i class="close"></i></h3>
                    <div class="song-list">
                        <div class="list-tit clearfix">
                            <span>总<span class="list-num">2</span>首</span>
                            <span class="clear"><i></i><span>清空</span></span>
                        </div>
                        <div class="list-detail">
                            <table>
                                <tr class="inherent" data-src="http://m2.music.126.net/DrZLe0xTrqUoqX1AklOwRw==/1421668536887877.mp3" data-img="http://p1.music.126.net/rMMa4M0eSjKpCeBEhA6wBA==/1407374885533603.jpg">
                                    <td class="song-name">光之翼</td>
                                    <td class="song-singer">简弘亦</td>
                                </tr>
                                <tr class="inherent" data-src="http://m2.music.126.net/JF7WBU9xmvFoU40UhD0UHA==/3378799232228268.mp3" data-img="http://p1.music.126.net/sqczK3-OMzRHWrDgvOF2fg==/80264348833269.jpg">
                                    <td class="song-name">浮夸</td>
                                    <td class="song-singer">陈奕迅</td>
                                </tr>
                            </table>    
                        </div>
                    </div>
                </div>
            </div>
        </footer>
    </div>
<script src="js/jquery.js"></script>
<script src="node_modules/malihu-custom-scrollbar-plugin/
jquery.mCustomScrollbar.js"></script>
<script src="js/util.js"></script>
<script src="js/player.js"></script>
<script src="js/carousel.js"></script>
<script src="js/search.js"></script>
<script src="js/myFavorateSongs.js"></script>
<script src="js/playList.js"></script>
<script src="js/contextMenu.js"></script>
<script src="js/panel.js"></script>
<script src="js/createSongList.js"></script>
<script src="js/main.js"></script>
</body>
</html>
